<template>
    <view class="page">
		
		<view class="userinfo-box" style="padding: 140rpx 30rpx;">
					<view class="" style="display: flex;">
						<view class="uni-media-list-logo phto">
							<image :src="avatar" :lazy-load="true" style="border-radius: 50%;" />
						</view>
						<view class="" style="padding-left: 20rpx;">
							<view class="" style="font-size: 36rpx;">{{userinfo.name}}</view>
							<view class="" style="font-size: 36rpx;">{{userinfo.username}}</view>
							<view class="" style="font-size: 36rpx;">{{userinfo.team_name}}</view>
						</view>
						
						<view class="" style="margin-left: 120rpx;">
<!-- 							<view class="">团队总收益</view>
							<view class="">{{parseFloat(total_income).toFixed(2)}}元</view> -->
							<view class="">每月分红奖励</view>
							<view class="">{{parseFloat(award).toFixed(2) }}元</view>
						</view>
					</view>					
				</view>
				
				<view class="flex padding" style="margin: -100rpx 10rpx 0 10rpx;background-color: #fff;justify-content: space-between;text-align: center;border-radius: 20rpx;">
					
					<view class="col" style="">
						<view class="b" style="font-weight: bold;">团队总认购金额</view>
						<view style="margin: 20rpx 0 0;" class="">{{total_investment || 0}}元</view>
						
					</view>
					<view class="col" style="">
						<view class="b" style="font-weight: bold;">团队总充值金额</view>
						<view style="margin: 20rpx 0 0;" class="">{{total_recharge || 0}}元</view>
						
					</view>					
					<view class="col">
						<view class="" style="font-weight: bold;">团队总提款</view>
						<view style="margin: 20rpx 0 0;" class="b">{{total_cash || 0}}元</view>
						<!-- <p>团队总投资</p> -->
					</view>
					<view class="col">
						<view class="" style="font-weight: bold;">团队待返本金</view>
						<view style="margin: 20rpx 0 0;" class="b">{{total_waitmoney || 0}}元</view>
						<!-- <p></p> -->
					</view>
		<!-- 			<view class="ckgd" data_zt="0">
						<p>查看升级团长进度<i class="ew-tree-icon layui-icon layui-icon-triangle-d"></i></p>
					</view>
					<view class="cksjtj" style="display: none;">
						<view class="css_tdbox">
							<view class="row tdbox-bet">
								<view class="left">满足下列条件，即可升级为【星际团队长】</view>
							</view>
							<view class="row tdbox-bet">
								<view class="left">直荐有效人数：</view>
								<view class="right">0/8</view>
							</view>
							<view class="row tdbox-bet">
								<view class="left">总团队有效人数：</view>
								<view class="right">707/0</view>
							</view>
							<view class="row tdbox-bet">
								<view class="left">团队总投资：</view>
								<view class="right">43132500/300000.00</view>
							</view>
							<view class="tuanzhang-jindu-box">
								<view class="progress-bar-txt tdbox-bet"><span>距离升级完成进度:</span><b>66.67%</b></view>
								<view class="progress-bar">
									<view class="slider" style="width:66.67%;"></view>
								</view>
							</view>
						</view>
					</view> -->
				</view>
				
				<view class="swiper-box" style="margin-top: 4rpx;">
					<view class="uni-margin-wrap">
						<swiper
							class="screen-swiper square-dot" 
							circular="true" 
							indicator-color="#ffffff"
							indicator-active-color="#0f72ff"
							indicator-dots="true" 
							autoplay="true"
							interval="5000" 
							duration="500">
							<swiper-item v-for="(item, index) in carouselList" :key="index" @click="navToAdvUrls(item)">
								<image :src="weburl + item.path" mode="scaleToFill"></image>
							</swiper-item>
						</swiper>
					</view>
				</view>
				
				
				<view class="" style="margin-top:50rpx;">
					<view style="background-color: #ccc;margin-top:10rpx;padding:5rpx 1rpx;text-align: center;justify-content: center;">
    <span style="margin-right: 50rpx;" v-if="this.uid === userinfo.id">我的伙伴</span>
    <span style="margin-right: 50rpx;" v-else>{{ this.name }}的伙伴</span>
						<span style="margin-right: 50rpx;">直推总人数：{{this.total_ztmembers}}</span>
						<span>团队总人数：{{this.total_members}}</span>
					</view>
					<view v-for="(item,index) in team_members" @click="navToUrl('/pages/team/index?uid='+item.id)" class="padding" style="background-color: #fff;margin-top: 10rpx;padding-left:15rpx;">
						<view class="">姓名：<text style="color: #999;">{{item.name}}</text> </view>
						<view class="">推广帐号：<text style="color: #999;">{{item.username}}</text></view>
						<view class="">累计充值：<text style="color: #ff5500;">￥{{item.recharge_amount}}元</text></view>
						<view class="">累计提款：<text style="color: #ff5500;">￥{{item.cash_amount}}元</text></view>
						<view class="">认购金额：<text style="color: #ff5500;">￥{{item.value}}元</text></view>
						<view style="background-color: #ccc;margin-top:10rpx;padding:5rpx 1rpx;">
							<span>直推人数：{{item.my_ztteammembers}}</span>
							<span style="margin-left:100px;">团队人数：{{item.my_allteammember}}</span>
						</view>
					</view>
				</view>
		<tabBar :currentPage="currentPage"></tabBar>
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar/tabBar.vue';
	import nTable from '@/components/n-table/n-table.vue';
	import {baseColumns, treeColumnsData} from "@/common/tableData.js"
    export default {
		components: {
			tabBar,
			nTable
		},
		
		data() {
			return {
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				team_members:[],
				currentPage: '/pages/team/index',
				userinfo: [],
				list:[],
				ifOnShow:false,
				headerOpt: {},
				tableDataTree: false,
				columns: false,
				total_cash:0,
				total_investment:0,
				total_members:0,
				total_recharge:0,
				total_zhitui:0,
				total_waitmoney:0,
				total_ztmembers:0,
				total_income:0,
				avatar: '/static/icon_avatar.png',
				uid:"",
				name:"",
				award:0

			};
		},
		onLoad: function (option) {
			this.helper.checkLogin();
			if('uid' in option){
				this.uid = option.uid
			}
			
			this.getData();
			this.loadData();
			this.loadBanners();
		},
		methods: {
			getData:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getUserInfo",
					timestamp:timestamp,
					data:{token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.userinfo = res.data.data.userinfo;
					if(this.userinfo.avatar.length > 0){
						this.avatar = this.userinfo.avatar;
						if(!this.uid){
							this.uid = this.userinfo.id;
						}
						this.loadImg();
					}
					setTimeout(() => {
						uni.hideLoading();
					}, 300);
				})
			},
			loadImg: function() {
				var range = Math.round(Math.random() * (99999 - 11111)) + 11111;
				this.avatar = this.weburl + this.avatar +'?k='+ range;
			},			
			loadBanners: function() {
				// uni.showLoading({
				// 	title: "数据加载中",
				// 	mask: true
				// })
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['type=home', 'timestamp=' + timestamp]);
				this.helper.req({
					api: "getBanners",
					timestamp: timestamp,
					data: {
						type: 'home'
					},
					header: {
						sign: sign
					},
					method: 'GET',
				}).then(res => {
					// console.log(res);
					this.carouselList = res.data.data.list;
					this.swiperLength = this.carouselList.length;
					uni.hideLoading();
				});
			},
			
			loadData:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token='+info.token,'timestamp='+timestamp,'uid='+this.uid]);
				this.helper.req({
					api:"getTeamInfo",
					timestamp:timestamp,
					data:{token:info.token,uid:this.uid},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.team_members = res.data.data.team_members;
					this.total_cash = res.data.data.total_cash;
					this.total_investment = res.data.data.total_investment;
					this.total_waitmoney = res.data.data.total_waitmoney;
					this.total_ztmembers = res.data.data.total_ztmembers;
					this.total_members = res.data.data.total_members;
					this.total_income = res.data.data.total_income;
					this.total_recharge = res.data.data.total_recharge;
					this.name = res.data.data.name;
					this.award = res.data.data.award;
					setTimeout(() => {
						uni.hideLoading();
					}, 300);
				})
			},
			navToUrl: function(url) {
				return uni.navigateTo({
					url: url
				});
			}
		},
	};
</script>

<style lang="scss">
page {
    background-color: #fff;
}
	.phto {
		width: 100rpx;
		height: 100rpx;
		margin-left: 30 upx;
		margin-right: 30 upx;
	}
.userinfo-box{
		padding: 20rpx;
		background-color: #0d78f7;
		color: #fff;
		.img-box{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: #EEE
		}
		
		.tag{
			background-color: #74b7f4;
			padding: 0 10rpx;
			border-radius: 10rpx;
			margin-right: 10rpx;
			font-size: 24rpx;
		}
	}
	
	.padding {
		padding: 15px 11px;
		.team-head-info {
			height: auto;
			border-radius: 0.68rem;
			margin-bottom: 0rem;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			align-content: center;
			// background-color: #fff!important;
			background: linear-gradient(186deg,rgba(255, 255,255, 1.0) 0%, rgba(255, 355,355, 1.0) 100%);
			box-shadow: 0.2048rem 0.191rem 0.32rem 0px rgba(16, 115, 195, 0.27);
		}
		.team-head-info .col {
			width: 33%;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.team-head-info .b {
			word-break: break-all;
		}
		.team-head-info .b {
		  font-size: 1.04rem;
		  font-weight: 700;
		  letter-spacing: 0px;
		  line-height: 0.96rem;
		  color: #333;
		  text-align: center;
		  vertical-align: top;
		  word-break: break-all;
		}
		.team-head-info p {
		  font-size: 0.88rem;
		  font-weight: 500;
		  letter-spacing: 0px;
		  line-height: 0.88rem;
		  color: #333;
		  text-align: center;
		  vertical-align: top;
		}
		.ckgd {
			display: inline-block;
			width: 100%;
			padding-top: 0.5rem;
		}
	}

</style>
